<template>
	<view class="record-packbox relative">
		<view v-for="(item, index) in list" :key="index" class="record-item font-hanserif-bold relative">
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/record-item-bg.png`" class="bg" />
				
			<view v-if="recordType === 1" class="relative bottom-btns flex flex-justify-content-between">
				<view class="bottom-btns-left flex-direction-column truncate flex-justify-content-center flex-full">
					<view class="bottom-right-top truncate" style="text-align: left;width: 100%;">
						{{ item.nickname }} 的福袋
					</view>
					
					<view class="bottom-left-bottom">{{ item.create_time }}</view>
				</view>
				
				<view class="bottom-btns-right flex-direction-column flex-justify-content-center flex-base">
					<view class="flex-align-items-end">
						<view class="bottom-left-top relative" style="z-index: 2;color: #63FFF7;">￥<text style="font-size: 48rpx;"> {{ item.get_money || '0' }}</text></view>
						<view class="bottom-left-top-border absolute" style="z-index: 1;color: #63FFF7;">￥<text style="font-size: 48rpx;"> {{ item.get_money || '0' }}</text></view>
					</view>
				</view>
			</view>
			
			<view v-if="recordType === 2" 
				:class="['relative', 'bottom-btns', 'flex', 'flex-justify-content-between', item.is_open_all || item.is_time_out ? '' : '',]">
				<image v-if="item.is_open_all" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/open-all-icon.png`" 
					class="info-bg absolute" />
				<image v-else-if="item.is_time_out"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/time-out-icon.png`" 
					class="info-bg absolute" />
				
				<view class="bottom-btns-left flex-direction-column flex-justify-content-center">
					<view class="flex-align-items-end">
						<view class="bottom-left-top relative flex-align-items-end" style="z-index: 2;">
							<view>福袋总额：</view>
							<view><text style="font-size: 28rpx;"> {{ item.money || '0' }}</text> 旺旺币</view>
						</view>
						<view class="bottom-left-top-border absolute flex-align-items-end" style="z-index: 1;">
							<view>福袋总额：</view>
							<view><text style="font-size: 28rpx;"> {{ item.money || '0' }}</text> 旺旺币</view>
						</view>
					</view>
					
					<view class="bottom-left-bottom">{{ item.create_time }}</view>
				</view>
				
				<view class="bottom-btns-right flex-direction-column flex-justify-content-center">
					<view class="bottom-right-top">
						福袋个数：{{ item.num }}个
					</view>
					
					<view class="bottom-right-bottom flex-all-center">
						<!-- 查看记录 -->
						<image @click="gotoConfirm(item)" style="margin-right: 22rpx;"
							class="btn-view" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/read-icon.png`"
							mode=""></image>
						
						<button v-if="!item.is_open_all && !item.is_time_out" open-type="share" class="btn-view" @click.stop="setShareFun(item)">
							<!-- 分享 -->
							<view class="btn-coupon-bg relative">
								<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/share-icon.png`" 
								style="width: 110rpx; height: 40rpx;"
								mode=""></image>
							</view>
						</button>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 详情弹窗 -->
		<view class="maskview fixed font-hanserif-bold" v-if="confirmDialog" :zoom="true" @click="closeConfirmDialog">
			<view class="mask-info-content absolute-center" @click.stop="confirmDialog = true">
				<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/mask-popup-bg.png`" mode=""></image>
				
				<view style="width: 100%;top: 120rpx;" class="absolute flex-direction-column flex-all-center">
					<view class="user-info-box flex-all-center">
						<view class="record-cover flex-all-center relative">
							<image class="record-cover-img" :src="confirmInfo.userinfo.avatar" mode=""></image>
							<image class="absolute" v-if="confirmInfo.userinfo.vip_cover" :src="confirmInfo.userinfo.vip_cover" mode="heightFix"
								:style="{
									'border-radius': 'unset',
									'width': 'auto',
									'top': '-18rpx',
									'left': '-20rpx',
									'right': 0,
									'height': '110rpx',
									'margin': 'auto',
									'z-index': 1,
								}"></image>
						</view>
						
						<view class="relative truncate">
							{{ confirmInfo.userinfo.nickname }}发出的福袋
						</view>
					</view>
					
					<view class="relative truncate flex-all-center" style="width: 80%;color: #FF8B1D;">
						{{ confirmInfo.title || '恭喜发财,大吉大利' }}
					</view>
				</view>
				
				<view class="relative redenvelope-num-box flex-align-items-center">
					已领取 {{ confirmInfo.open_num }}/{{ confirmInfo.num }} 个，共 {{ confirmInfo.open_money }}/{{ confirmInfo.money }} 飞机币
				</view>
				
				<scroll-view scroll-y class="info-list-content absolute" @scrolltolower="scrolltolower">
					<view v-if="confirmInfo.log && confirmInfo.log.length"  v-for="(item, index) in confirmInfo.log" 
						:key="index" class="record-item font-hanserif-bold relative">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/item-bg.png`" class="bg" />
							
						<view class="relative bottom-btns flex flex-justify-content-between">
							<view class="bottom-btns-left flex-direction-column flex-justify-content-center">
								<view class="bottom-right-top" style="text-align: left;">
									{{ item.nickname }}
								</view>
								
								<view class="bottom-left-bottom">{{ item.create_time }}</view>
							</view>
							
							<view class="bottom-btns-right flex-direction-column flex-justify-content-center">
								
								<view class="flex-align-items-end">
									<view class="bottom-left-top relative" style="z-index: 2;"><text style="font-size: 38rpx;"> {{ item.get_money || '0' }}</text> 飞机币</view>
									<view class="bottom-left-top-border absolute" style="z-index: 1;"><text style="font-size: 38rpx;"> {{ item.get_money || '0' }}</text> 飞机币</view>
								</view>
								
								<view v-if="item.is_max" class="relative bottom-left-bottom flex-align-items-center">
									<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_max === 1"
										class="ouhuang-icon" 
										:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/king-icon.png`" mode=""
									></image>
									<view>手气最佳</view>
								</view>
								
							</view>
						</view>
					</view>
		
					<comEmptyData v-if="confirmInfo.log && !confirmInfo.log.length" />
				</scroll-view>
			
				<view class="absolute close-tips flex-all-center">
					--- 点击空白处可关闭弹框 --- 
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getRedPacketDetailApi
	} from '@/setupproject/INTERFACE.js';
	export default {
		name: 'comRedRecord',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			recordType: {
				type: Number,
				default: () => 1
			},
		},
		data() {
			return {
				confirmDialog: false,
				confirmInfo: {},
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods: {
			setShareFun(item) {
				this.$emit('share', item)
			},
			
			// 显示弹框及弹框信息
			async gotoConfirm(item) {
				const {
					data,
					code,
					msg
				} = await getRedPacketDetailApi({
					ids: item.red_packet_id,
				});
				
				this.confirmDialog = false;
				this.confirmInfo = {};
				
				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				
				this.confirmInfo = data;
				this.confirmDialog = true;
			},
			
			// 关闭弹框
			closeConfirmDialog() {
				this.confirmDialog = false;
				this.confirmInfo = {};
			},

		}
	};
</script>

<style lang="scss" scoped>
	.record-packbox {
		width: 100%;
		padding-bottom: 18rpx;

		.record-item {
			color: #111111;
			font-size: 30rpx;
			margin: auto auto 20rpx;
			padding: 0 28rpx;
			width: 686rpx;
			height: 132rpx;

			.title {
				margin-bottom: 8rpx;
			}

			.box-name {
				font-size: 30rpx;
				margin-bottom: 12rpx;
				color: #999999;
			}
			
			.disabled {
				filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
			}

			.bottom-btns {
				width: 100%;
				height: 100%;
				
				.info-bg {
					top: 4rpx;
					left: 300rpx;
					width: 120rpx;
					height: 120rpx;
				}

				.bottom-btns-left {
					color: #63FFF7;
					font-size: 28rpx;
				}
				
				.bottom-left-top {
					font-size: 28rpx;
					color: #63FFF7;
					// text-stroke: 1rpx #C06D24;
					// background: linear-gradient(to top, #FFF8AF 0%, #FFB300 100%);
					// -webkit-text-stroke: 1rpx #C06D24;
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;
				}
				.bottom-left-top-border {
					font-size: 28rpx;
					color: transparent;
					// text-stroke: 2rpx #C06D24;
					// -webkit-text-stroke: 2rpx #C06D24;
				}
				
				.bottom-left-bottom {
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
				}

				.bottom-btns-right {
					.btn-view {
						width: 110rpx;
						height: 40rpx;
					}
				}
				
				.bottom-right-top {
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.bottom-right-bottom {
					margin-top: 10rpx;
				}
				
			}
		}
	}

	// 弹框
	.maskview {
		background: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		color: #fff;
		top: 0;
		left: 0;
		z-index: 10000;
		width: 100%;
		height: 100vh;
		
		.mask-info-content {
			font-size: 28rpx;
			width: 710rpx;
			height: 1112rpx;
			
			.user-info-box {
				width: 100%;
				height: 110rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				
				.record-cover {
					width: 76rpx;
					height: 76rpx;
					margin-right: 28rpx;
					border-radius: 100%;
					
					.record-cover-img {
						width: 68rpx;
						height: 68rpx;
						overflow: hidden;
						border-radius: 100%;
					}
				}
			}
			
			.redenvelope-num-box {
				width: 100%;
				height: 28rpx;
				color: rgba(255, 255, 255, 1);
				top: 320rpx;
				left: 30rpx;
			}
			
			.info-list-content {
				width: 710rpx;
				height: 740rpx;
				overflow-y: auto;
				top: 340rpx;
				left: 0;
				right: 0;
				margin: auto;
				padding: 30rpx 0;
				
				.record-item {
					color: #111111;
					font-size: 30rpx;
					margin: auto auto 20rpx;
					padding: 0 28rpx;
					width: 650rpx;
					height: 112rpx;
			
					.title {
						margin-bottom: 8rpx;
					}
			
					.box-name {
						font-size: 30rpx;
						margin-bottom: 12rpx;
						color: #999999;
					}
			
					.bottom-btns {
						width: 100%;
						height: 100%;
			
						.bottom-btns-left {
							color: #FE7000;
							font-size: 26rpx;
						}
						
						.bottom-left-top {
							font-size: 28rpx;
							color: #FFFFFF;
							// text-stroke: 1rpx #C06D24;
							background: linear-gradient(to top, #FFF8AF 0%, #FFB300 100%);
							// -webkit-text-stroke: 1rpx #C06D24;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
						
						.bottom-left-top-border {
							font-size: 28rpx;
							color: transparent;
							text-stroke: 2rpx #C06D24;
							-webkit-text-stroke: 2rpx #C06D24;
						}
						
						.bottom-left-bottom {
							font-size: 24rpx;
							color: #FFFFFF;
							margin-top: 10rpx;
						}
			
						.bottom-btns-right {
							.btn-view {
								width: 105rpx;
								height: 32rpx;
							}
						}
						
						.bottom-right-top {
							font-size: 28rpx;
							color: #111111;
							text-align: center;
						}
						.bottom-right-bottom {
							margin-top: 10rpx;
						}
						
					}
				}
				
		
				
				.bottom-left-bottom {
					font-size: 24rpx;
					color: #FFFFFF;
				}
				
				.ouhuang-icon {
					margin-right: 10rpx;
					width: 34rpx;
					height: 26rpx;
				}
			}
			
			.close-tips {
				width: 100%;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.5);
				top: 1120rpx;
			}
			
		}
	}
	
</style>